<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'

// 查询
const pageSize = ref(10);
const pageNo = ref(1);
const headers = [
    {title: '序号', key: 'num', sortable: false, width: 70},
    {title: '地址编码', key: 'addressCode', sortable: false, width: 100},
    {title: '报警按钮类型', key: 'deviceType', sortable: false, width: 130},
    {title: '关联摄像头编码', key: 'showCameraCodes', sortable: false},
    {title: '关联门禁ID', key: 'showDoors', sortable: false},
    {title: '备注', key: 'deviceRemark', sortable: false},
    {title: '操作', key: 'actions', sortable: false}
];
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);

const search = ref('');
const name = ref(null);
const ip = ref(null);
const remark = ref(null);
const cameraList = ref([]);
const doorsList = ref([]);
watch(name, () => {
    search.value = name.value
})
watch(ip, () => {
    search.value = ip.value
})
watch(remark, () => {
    search.value = remark.value
})

function loadItems({page, itemsPerPage}) {
    loading.value = true;
    pageNo.value = page;
    pageSize.value = itemsPerPage;
    axios.post('/deviceInfo/select', {
        pageNo: page,
        pageSize: itemsPerPage,
        deviceType: name.value,
        addressCode: ip.value,
        deviceRemark: remark.value
    }).then(({data}) => {
        items.value = data.data.records;
        items.value.forEach(item => {
            item.showCameraCodes = []
            if(item.cameraCodes) {
                item.cameraCodes.split(",").forEach(k => {
                    cameraList.value.forEach(i => {
                        if(k == i.deviceCode) {
                            item.showCameraCodes.push(i.showName)
                        }
                    })
                })
            }
            item.showCameraCodes = item.showCameraCodes.join(",")

            item.showDoors = []
            if(item.doorId) {
                item.doorId.split(",").forEach(k => {
                    doorsList.value.forEach(i => {
                        if(k == i.deviceUuid) {
                            item.showDoors.push(i.showName)
                        }
                    })
                })
            }
            item.showDoors = item.showDoors.join(",")
        })
        totalItems.value = data.data.total;
        loading.value = false;
    })
}

onMounted(() => {
    axios.post("/deviceCamera/getAll", {}).then(res => {
        cameraList.value = res.data.data
        cameraList.value.forEach(item => {
            item.showName = `${item.deviceCode}(${item.deviceName})`
        })
        axios.post("/device8700Door/getAll", {}).then(res => {
            doorsList.value = res.data.data
            var b = doorsList.value.reduce((acc, current) => {
                const isExist = acc.some(arr => arr.deviceUuid == current.deviceUuid);
                if(!isExist) {
                    acc.push(current)
                }
                return acc
            }, [])
            doorsList.value = b
            doorsList.value.forEach(item => {
                item.showName = `${item.deviceUuid}(${item.deviceName})`
            })
            loadItems({page: pageNo.value, itemsPerPage: pageSize.value});
        })        
    })
});

// 增改
const isShowDialog = ref(false)
const dialogEnum = {
    update: '编辑',
    create: '新增'
}
const dialogType = ref(null)
const isShowDeleteDialog = ref(false)
const editedItem = ref({
    fireName: ""
});

function resetEditedItem() {
    editedItem.value = {
        fireName: ""
    }
}

function clickNew() {
    dialogType.value = dialogEnum.create
    isShowDialog.value = true
    resetEditedItem()
}

function close() {
    isShowDialog.value = false
    resetEditedItem()
    dialogType.value = null
}

function clickEdit(item) {
    editedItem.value = Object.assign({}, item)
    if(editedItem.value.cameraCodes) {
        editedItem.value.cameraCodess = editedItem.value.cameraCodes.split(',')
    }
    if(editedItem.value.doorId) {
        editedItem.value.doorIds = editedItem.value.doorId.split(',')
    }
    editedItem.value.status += ""
    isShowDialog.value = true
    dialogType.value = dialogEnum.update
}

function save() {
    if(!!editedItem.value.cameraCodess) {
        editedItem.value.cameraCodes = editedItem.value.cameraCodess.join(",")
    }
    if(!!editedItem.value.doorIds) {
        editedItem.value.doorId = editedItem.value.doorIds.join(",")
    }
    if (dialogType.value === dialogEnum.update) {
        axios({
            method: 'POST',
            url: '/deviceInfo/update',
            data: editedItem.value
        }).then(() => {
            snackbar.info('编辑成功')
            close()
            loadItems({page: pageNo.value, itemsPerPage: pageSize.value})
        })
    } else if (dialogType.value === dialogEnum.create) {
        axios({
            method: 'POST',
            url: '/deviceInfo/save',
            data: editedItem.value
        }).then((res) => {
            console.log(res.data)
            snackbar.info('创建成功')
            close()
            loadItems({page: pageNo.value, itemsPerPage: pageSize.value})
        })
    }
}

// 删
const beDeleteItem = ref({})

function clickDelete(item) {
    isShowDeleteDialog.value = true
    beDeleteItem.value = item
}

function clickDeleteConfirm() {
    axios.get('/sys_role/role/delRole/?roleId=' + beDeleteItem.value.id).then(() => {
        snackbar.info("删除成功")
        loadItems({page: 1, itemsPerPage: pageSize.value})
        clickCloseDelete()
    })
}

function clickCloseDelete() {
    isShowDeleteDialog.value = false
    beDeleteItem.value = null
}

</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>报警按钮管理</v-toolbar-title>
        <v-text-field v-model="name" :clearable="true" hide-details placeholder="报警按钮类型"></v-text-field>
        <v-text-field v-model="ip" :clearable="true" hide-details placeholder="地址编码"></v-text-field>
        <v-text-field v-model="remark" :clearable="true" hide-details placeholder="备注"></v-text-field>
        <v-dialog v-model="isShowDialog" max-width="500px">
            <template v-slot:activator="{ props }">
                <v-btn icon="mdi-plus" v-on:click="clickNew" v-bind="props"></v-btn>
            </template>
            <v-card>
                <v-card-title>{{ dialogType }}</v-card-title>
                <v-card-text>
                    <v-text-field v-model="editedItem.addressCode" label="地址编码" required></v-text-field>
                    <v-text-field v-model="editedItem.deviceType" label="报警按钮类型" required></v-text-field>
                    <v-text-field v-model="editedItem.deviceRemark" label="备注" required></v-text-field>
                    <v-autocomplete
                    v-model="editedItem.cameraCodess"
                    :items=cameraList
                    item-title="showName"
                    item-value="deviceCode"
                    multiple
                    label="摄像头关联"
                    required></v-autocomplete>
                    <v-autocomplete
                    v-model="editedItem.doorIds"
                    :items=doorsList
                    item-title="showName"
                    item-value="deviceUuid"
                    multiple
                    label="门禁关联"
                    required></v-autocomplete>
                </v-card-text>
                <v-card-actions>
                    <v-btn color="primary" variant="text" @click="close">关闭</v-btn>
                    <v-btn color="primary" variant="text" @click="save">确定</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="isShowDeleteDialog" max-width="500px">
            <v-card>
                <v-card-title class="text-h5">确定删除?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue-darken-1" variant="text" @click="clickCloseDelete">取消</v-btn>
                    <v-btn color="blue-darken-1" variant="text" @click="clickDeleteConfirm">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-toolbar>
  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table-server :search="search" :items-per-page="pageSize" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.num="{ index }">
            <span>{{ index + 1 }}</span>
        </template>
        <template v-slot:item.status="{ item }">
            <span v-if="item.raw.status == 1">正常</span>
            <span v-if="item.raw.status == 2">停用</span>
        </template>
        <template v-slot:item.platform="{ item }">
            <span v-if="item.raw.platform == 1">海康</span>
            <span v-if="item.raw.platform == 2">大华</span>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-btn icon="mdi-pencil" variant="text" @click="clickEdit(item.raw)"></v-btn>
            <!-- <v-btn icon="mdi-delete" variant="text" @click="clickDelete(item.raw)"></v-btn> -->
        </template>
    </v-data-table-server>
</template>

<style scoped lang="less">

</style>
